<template>
  <div class="resume" slot="body">
    <HeaderByPerson></HeaderByPerson>
    <el-card class="box-card">
      <el-row>
        <el-col :span="4">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo">
            <el-menu-item index="1" @click="page_scroll(60)">
              <i class="el-icon-menu"></i>
              <span slot="title">基本信息</span>
            </el-menu-item>
            <el-menu-item index="2" @click="page_scroll(660)">
              <i class="el-icon-menu"></i>
              <span slot="title">教育经历</span>
            </el-menu-item>
            <el-menu-item index="3" @click="page_scroll(980)">
              <i class="el-icon-menu"></i>
              <span slot="title">项目经历</span>
            </el-menu-item>
            <el-menu-item index="4" @click="page_scroll(1200)">
              <i class="el-icon-menu"></i>
              <span slot="title">工作经历</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="16" style="margin: 20px">
          <div>
            <span style="font-weight: bold">
              基本信息
              <el-button v-show="!update_info_form_button" @click="update_info_form_button=true" size="mini"
                         style="float: right">点击修改</el-button>

              <el-button v-show="update_info_form_button" @click="submit_info" type="primary" size="mini"
                         style="float: right">保存</el-button>
              <el-button v-show="update_info_form_button" @click="update_info_form_button=false" size="mini"
                         style="float: right">返回</el-button>
              <br><br>
            </span>
            <div id="info_form">
              <el-form ref="info_form" v-if="!update_info_form_button" :model="info_form" label-width="150px">
                <el-form-item label="姓名">
                  <el-input disabled v-model="info_form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-input disabled v-model="info_form.gender_text"></el-input>
                </el-form-item>
                <el-form-item label="出生日期">
                  <el-date-picker disabled v-model="info_form.birth" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input disabled v-model="info_form.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input disabled v-model="info_form.email"></el-input>
                </el-form-item>
                <el-form-item label="QQ">
                  <el-input disabled v-model="info_form.qq"></el-input>
                </el-form-item>
                <el-form-item label="微信">
                  <el-input disabled v-model="info_form.wechat"></el-input>
                </el-form-item>
                <el-form-item label="自我介绍">
                  <el-input disabled type="textarea" v-model="info_form.remark"></el-input>
                </el-form-item>
                <el-divider></el-divider>
              </el-form>

              <el-form ref="info_form" v-if="update_info_form_button" :model="info_form" label-width="150px">
                <el-form-item label="姓名">
                  <el-input v-model="info_form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="info_form.gender">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                    <el-radio label="0">保密</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期">
                  <el-date-picker type="date" placeholder="选择日期" v-model="info_form.birth"
                                  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="info_form.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="info_form.email"></el-input>
                </el-form-item>
                <el-form-item label="QQ">
                  <el-input v-model="info_form.qq"></el-input>
                </el-form-item>
                <el-form-item label="微信">
                  <el-input v-model="info_form.wechat"></el-input>
                </el-form-item>
                <el-form-item label="自我介绍">
                  <el-input type="textarea" v-model="info_form.remark"></el-input>
                </el-form-item>
                <el-divider></el-divider>
              </el-form>
            </div>
            <div id="education_form">
              <el-form ref="education_form" :model="education_form" label-width="150px">
                <span style="font-weight: bold">
                  教育经历
                  <el-button type="primary" size="mini" style="float: right" @click="add_education_form_button=true">添加</el-button>
                  <br><br>
                </span>

                <el-dialog title="添加教育经历" :visible.sync="add_education_form_button"
                           :before-close="releaseEducation" width="40%">
                  <el-row>
                    <el-col :span="20">
                      <el-form-item label="学校名称" required>
                        <el-input v-model="education_form.title"></el-input>
                      </el-form-item>
                      <el-form-item label="专业名称" required>
                        <el-input v-model="education_form.content"></el-input>
                      </el-form-item>
                      <el-form-item label="在校日期" required>
                        <el-row>
                          <el-col :span="12">
                            <el-date-picker type="date" placeholder="开始日期" v-model="education_form.startDate"
                                            value-format="yyyy-MM-dd" style="width: 90%;"></el-date-picker>
                          </el-col>
                          <el-col :span="12">
                            <el-date-picker type="date" placeholder="结束日期" v-model="education_form.finalDate"
                                            value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="学历" required>
                        <el-select v-model="education_form.remark" placeholder="请选择学历" style="width: 100%">
                          <el-option label="大专" value="大专"></el-option>
                          <el-option label="本科" value="本科"></el-option>
                          <el-option label="硕士" value="硕士"></el-option>
                          <el-option label="博士" value="博士"></el-option>
                          <el-option label="其他" value="其他"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="releaseEducation">取 消</el-button>
                    <el-button type="primary" @click="submit_education">确 定</el-button>
                  </span>
                </el-dialog>

                <el-row v-for="i in education_list" :key="i" style="margin-top: 20px">
                  <el-col :span="6">{{i.title}}</el-col>
                  <el-col :span="5">{{i.content}}</el-col>
                  <el-col :span="3">{{i.remark}}</el-col>
                  <el-col :span="8">{{i.startDate}} 至 {{i.finalDate}}</el-col>
                  <el-col :span="2">
                    <el-link type="warning" @click="update_education(i.id)">修改</el-link>
                    <el-link type="danger" @click="del_education(i.id)">删除</el-link>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </el-form>
            </div>
            <el-form ref="project_form" :model="project_form" label-width="150px">
              <span style="font-weight: bold">
              项目经历
              <el-button style="float: right" type="primary" size="mini" @click="add_project_form_button = true">添加</el-button>
              <br><br>
            </span>
              <el-dialog title="添加项目经历" :visible.sync="add_project_form_button"
                         :before-close="releaseProject" width="40%">
                <el-row>
                  <el-col :span="20">
                    <el-form-item label="项目名称" required>
                      <el-input v-model="project_form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="负责内容" required>
                      <el-input type="textarea" v-model="project_form.content"></el-input>
                    </el-form-item>
                    <el-form-item label="起止日期" required>
                      <el-row>
                        <el-col :span="12">
                          <el-date-picker type="date" placeholder="开始日期" v-model="project_form.startDate"
                                          value-format="yyyy-MM-dd" style="width: 90%;"></el-date-picker>
                        </el-col>
                        <el-col :span="12">
                          <el-date-picker type="date" placeholder="结束日期" v-model="project_form.finalDate"
                                          value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item label="项目描述" required>
                      <el-input type="textarea" v-model="project_form.remark"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="releaseProject">取 消</el-button>
                    <el-button type="primary" @click="submit_project">确 定</el-button>
                  </span>
              </el-dialog>

              <div v-for="i in project_list">
                <div class="my-br" style=""></div>
                <el-row>
                  <el-col :span="6">{{i.title}}</el-col>
                  <el-col :span="8">{{i.content}}</el-col>
                  <el-col :span="8">{{i.startDate}} 至 {{i.finalDate}}</el-col>
                  <el-col :span="2">
                    <el-link type="warning" @click="update_project(i.id)">修改</el-link>
                    <el-link type="danger" @click="del_project(i.id)">删除</el-link>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 20px">{{i.remark}}</el-row>
              </div>
              <el-divider></el-divider>
            </el-form>

            <el-form ref="work_form" :model="work_form" label-width="150px">
              <span style="font-weight: bold">
              工作经历
              <el-button style="float: right" type="primary" size="mini" @click="add_work_form_button = true">添加</el-button>
              <br><br>
            </span>
              <el-dialog title="添加工作经历" :visible.sync="add_work_form_button"
                         :before-close="releaseWork" width="40%">
                <el-row>
                  <el-col :span="20">
                    <el-form-item label="公司名称">
                      <el-input v-model="work_form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="工作职位">
                      <el-input v-model="work_form.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="起止日期">
                      <el-row>
                        <el-col :span="12">
                          <el-date-picker type="date" placeholder="开始日期" v-model="work_form.startDate"
                                          value-format="yyyy-MM-dd" style="width: 90%;"></el-date-picker>
                        </el-col>
                        <el-col :span="12">
                          <el-date-picker type="date" placeholder="结束日期" v-model="work_form.finalDate"
                                          value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item label="工作内容">
                      <el-input type="textarea" v-model="work_form.content"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="releaseWork">取 消</el-button>
                    <el-button type="primary" @click="submit_work">确 定</el-button>
                  </span>
              </el-dialog>
              <div v-for="i in work_list">
                <div class="my-br" style=""></div>
                <el-row>
                  <el-col :span="6">{{i.title}}</el-col>
                  <el-col :span="8">{{i.remark}}</el-col>
                  <el-col :span="8">{{i.startDate}} 至 {{i.finalDate}}</el-col>
                  <el-col :span="2">
                    <el-link type="warning" @click="update_work(i.id)">修改</el-link>
                    <el-link type="danger" @click="del_work(i.id)">删除</el-link>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 20px">{{i.content}}</el-row>
              </div>
            </el-form>

          </div>

        </el-col>
      </el-row>
    </el-card>
    <Footer></Footer>
  </div>
</template>

<script>
  import HeaderByPerson from './HeaderByPerson'
  import Footer from './Footer'

  export default {
    name: 'Resume',
    components: {HeaderByPerson, Footer},
    created () {
      this.$axios.post('http://localhost:8081/user/getUserById', {'id': this.$session.get('user').id}).then((res) => {
        const result = res.data
        if (result.code === '1') {
          this.info_form = result.data
          if (this.info_form.gender == 1) {
            this.info_form.gender_text = '男'
          } else if (this.info_form.gender == 2) {
            this.info_form.gender_text = '女'
          } else {
            this.info_form.gender_text = '保密'
          }
        } else if (result.code === '0') {
          this.$message({message: result.msg, type: 'warning'})
        } else {
          this.$message.error(result.msg)
        }
      })
      this.$axios.post('http://localhost:8081/resume/selectByCreateBy', {
        'createBy': this.$session.get('user').id,
        'name': '教育经历'
      }).then((res) => {
        const result = res.data
        this.education_list = result.data
      })
      this.$axios.post('http://localhost:8081/resume/selectByCreateBy', {
        'createBy': this.$session.get('user').id,
        'name': '项目经历'
      }).then((res) => {
        const result = res.data
        this.project_list = result.data
      })
      this.$axios.post('http://localhost:8081/resume/selectByCreateBy', {
        'createBy': this.$session.get('user').id,
        'name': '工作经历'
      }).then((res) => {
        const result = res.data
        this.work_list = result.data
      })
    },
    data () {
      return {
        update_info_form_button: false,
        add_education_form_button: false,
        add_project_form_button: false,
        add_work_form_button: false,
        is_update_education: false,
        is_update_project: false,
        is_update_work: false,
        education_list: [],
        project_list: [],
        work_list: [],
        info_form: {
          name: '',
          gender: '',
          birth: '',
          phone: '',
          email: '',
          qq: '',
          wechat: '',
          picture: '',
          remark: ''
        },
        education_form: {
          name: '教育经历',
          title: '',
          content: '',
          startDate: '',
          finalDate: '',
          remark: '',
          createBy: ''
        },
        project_form: {
          name: '项目经历',
          title: '',
          content: '',
          startDate: '',
          finalDate: '',
          remark: '',
          createBy: ''
        },
        work_form: {
          name: '工作经历',
          title: '',
          content: '',
          startDate: '',
          finalDate: '',
          remark: '',
          createBy: ''
        },
      }
    },
    methods: {
      refresh_info () {
        this.$axios.post('http://localhost:8081/user/getUserById', {'id': this.$session.get('user').id}).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.info_form = result.data
            if (this.info_form.gender == 1) {
              this.info_form.gender_text = '男'
            } else if (this.info_form.gender == 2) {
              this.info_form.gender_text = '女'
            } else {
              this.info_form.gender_text = '保密'
            }
          } else if (result.code === '0') {
            this.$message({message: result.msg, type: 'warning'})
          } else {
            this.$message.error(result.msg)
          }
        })
      },
      refresh_education () {
        this.$axios.post('http://localhost:8081/resume/selectByCreateBy', {
          'createBy': this.$session.get('user').id,
          'name': '教育经历'
        }).then((res) => {
          const result = res.data
          this.education_list = result.data
        })
      },
      refresh_project () {
        this.$axios.post('http://localhost:8081/resume/selectByCreateBy', {
          'createBy': this.$session.get('user').id,
          'name': '项目经历'
        }).then((res) => {
          const result = res.data
          this.project_list = result.data
        })
      },
      refresh_work () {
        this.$axios.post('http://localhost:8081/resume/selectByCreateBy', {
          'createBy': this.$session.get('user').id,
          'name': '工作经历'
        }).then((res) => {
          const result = res.data
          this.work_list = result.data
        })
      },
      submit_info () {
        this.update_info_form_button = false
        this.$axios.post('http://localhost:8081/user/updateUser', this.info_form).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.refresh_info()
            this.$message({message: result.msg, type: 'success'})
          } else if (result.code === '0') {
            this.$message({message: result.msg, type: 'warning'})
          } else {
            this.$message.error(result.msg)
          }
        })
      },
      submit_education () {
        this.education_form.createBy = this.$session.get('user').id
        this.add_education_form_button = false
        var submit_url = ''
        if (!this.is_update_education) {
          submit_url = 'http://localhost:8081/resume/add'
        } else {
          submit_url = 'http://localhost:8081/resume/update'
        }
        this.$axios.post(submit_url, this.education_form).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.education_form = {name: '教育经历'}
            this.refresh_education()
            this.$message({message: result.msg, type: 'success'})
          }
        })
        this.is_update_education = false
      },
      submit_project () {
        this.project_form.createBy = this.$session.get('user').id
        this.add_project_form_button = false
        var submit_url = ''
        if (!this.is_update_project) {
          submit_url = 'http://localhost:8081/resume/add'
        } else {
          submit_url = 'http://localhost:8081/resume/update'
        }
        this.$axios.post(submit_url, this.project_form).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.project_form = {name: '项目经历'}
            this.refresh_project()
            this.$message({message: result.msg, type: 'success'})
          }
        })
        this.is_update_project = false
      },
      submit_work () {
        this.work_form.createBy = this.$session.get('user').id
        this.add_work_form_button = false
        var submit_url = ''
        if (!this.is_update_work) {
          submit_url = 'http://localhost:8081/resume/add'
        } else {
          submit_url = 'http://localhost:8081/resume/update'
        }
        this.$axios.post(submit_url, this.work_form).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.work_form = {name: '工作经历'}
            this.refresh_work()
            this.$message({message: result.msg, type: 'success'})
          }
        })
        this.is_update_work = false
      },
      update_education (id) {
        this.$axios.post('http://localhost:8081/resume/selectById', {'id': id}).then((res) => {
          const result = res.data
          this.education_form = result.data
        })
        this.add_education_form_button = true
        this.is_update_education = true
      },
      del_education (id) {
        this.$axios.post('http://localhost:8081/resume/delete', {'id': id}).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.$message({message: result.msg, type: 'success'})
          } else if (result.code === '0') {
            this.$message({message: result.msg, type: 'warning'})
          } else {
            this.$message.error(result.msg)
          }
        })
        this.refresh_education()
      },
      update_project (id) {
        this.$axios.post('http://localhost:8081/resume/selectById', {'id': id}).then((res) => {
          const result = res.data
          this.project_form = result.data
        })
        this.add_project_form_button = true
        this.is_update_project = true
      },
      update_work (id) {
        this.$axios.post('http://localhost:8081/resume/selectById', {'id': id}).then((res) => {
          const result = res.data
          this.work_form = result.data
        })
        this.add_work_form_button = true
        this.is_update_work = true
      },
      del_project (id) {
        this.$axios.post('http://localhost:8081/resume/delete', {'id': id}).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.$message({message: result.msg, type: 'success'})
          } else if (result.code === '0') {
            this.$message({message: result.msg, type: 'warning'})
          } else {
            this.$message.error(result.msg)
          }
        })
        this.refresh_project()
      },
      del_work (id) {
        this.$axios.post('http://localhost:8081/resume/delete', {'id': id}).then((res) => {
          const result = res.data
          if (result.code === '1') {
            this.$message({message: result.msg, type: 'success'})
          } else if (result.code === '0') {
            this.$message({message: result.msg, type: 'warning'})
          } else {
            this.$message.error(result.msg)
          }
        })
        this.refresh_work()
      },
      page_scroll (height) {
        document.documentElement.scrollTop = height
      },
      releaseEducation () {
        this.add_education_form_button = false
        this.education_form = {}
      },
      releaseProject () {
        this.add_project_form_button = false
        this.project_form = {}
      },
      releaseWork () {
        this.add_work_form_button = false
        this.work_form = {}
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
